<template>
	<view class="wf-box">
		<view v-if="barshow" class="bar" :style="{height:navBarHeight}"></view>
		<view class="browse-head" :style="{ paddingTop: navBarHeight }">
			<view class="browse-search">
				<image src="../../static/img/search.png" class="search-img"></image>
				<input type="text" placeholder="搜索输入DAPP名称或网址" confirm-type="search" @confirm="search">
				<image src="../../static/img/me-23.png" class="sao-img"></image>
			</view>
		</view>

		<view class="browse-scroll">
			<scroll-view class="scroll-view-x" scroll-x="true">
				<!-- act-item -->
				<view class="scroll-view-item" :class="{'tab_sel':tabIndex==i}" v-for="(item,i) in 0"
					@click="tab(tabIndex=i)">
					{{item}}
				</view>
			</scroll-view>

		</view>

		<view class="main-ctr" v-if="tabIndex==0">
			<!-- <view class="c-wrap">
				<view class="c-top-nav">
					<view class="nav-item act-nav">
						<view>收藏</view>
					</view>
					<view class="nav-item">
						<view>浏览记录</view>
					</view>
				</view>

				<view class="c-down">
					<view class="empty">
						<image src="../../static/img/me-46.png"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="c_btn" @click="brok()">交易所</view>
			</view> -->

			<view class="new-box">
				<!-- <view class="new-f-tit">
					<view>新项目合集</view>
					<view>
						全部
						<image src="../../static/img/chat-20.png"></image>
					</view>
				</view> -->

				<view class="new-project">
					<view class="project-item" @click="openPopup(item.browserAddress)" v-for="item in borwseList">
						<image :src="item.browserLogo" mode="aspectFit"></image>
						<view class="project-info">
							<view>{{ item.browserName }}</view>
							<view>{{ item.browserAddress }}</view>
						</view>
					</view>
					<view class="project-item" @click="shop()">
						<image src="@/static/img/browse_img5.png" mode="aspectFit"></image>
						<view class="project-info">
							<view>兑换商城</view>
							<view>进入商城进行兑换商品</view>
						</view>
					</view>

					<!-- <view class="project-item">
						<image src="../../static/img/baro_01.png"></image>
						<view class="project-info">
							<view>CC农场</view>
							<view>参与农场最高可获得180%奖励...</view>
						</view>
					</view>

					<view class="project-item">
						<image src="../../static/img/baro_01.png"></image>
						<view class="project-info">
							<view>Slotie NFT</view>
							<view>Slotie是将DeFi带入赌博的实用NFT。</view>
						</view>
					</view> -->

				</view>
			</view>

			<!-- <view class="recomm-box">
				<view class="recomm-tit">热门项目推荐</view>
				<view class="recomm-list">
					<view class="recomm-item">
						<image src="../../static/img/demo-06.png"></image>
						<view class="recomm-info">
							<view>Uniswap V3</view>
							<view>Uniswap V3是为以太坊虚拟机实施的非</view>
						</view>
					</view>

					<view class="recomm-item">
						<image src="../../static/img/demo-06.png"></image>
						<view class="recomm-info">
							<view>Uniswap V3</view>
							<view>Uniswap V3是为以太坊虚拟机实施的非</view>
						</view>
					</view>

					<view class="recomm-item">
						<image src="../../static/img/demo-06.png"></image>
						<view class="recomm-info">
							<view>Uniswap V3</view>
							<view>Uniswap V3是为以太坊虚拟机实施的非</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="main-ctr" v-if="tabIndex==1">
			<view class="new-box pt_0">
				<view class="new-project">
					<view class="project-item" @click="brok()">
						<image src='@/static/img/browse_img4.png'></image>
						<view class="project-info">
							<view>交易所</view>
							<view>买入卖出最新交易订单</view>
						</view>
					</view>
					<view class="project-item">
						<image src='@/static/img/browse_img1.png'></image>
						<view class="project-info">
							<view>CC公益</view>
							<view>参与公益生活，分享精彩瞬间</view>
						</view>
					</view>
					<view class="project-item">
						<image src='@/static/img/browse_img2.png'></image>
						<view class="project-info">
							<view>本地生活</view>
							<view>一起分享本地生活新闻趣事</view>
						</view>
					</view>
					<view class="project-item">
						<image src='@/static/img/browse_img3.png'></image>
						<view class="project-info">
							<view>CC商学院</view>
							<view>及时更新学院信息...</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<uni-popup ref="popup" background-color="transparent" border-radius="8px 8px 0 0" type="bottom">
			<view class="network-box">
				<view class="network-title">即将跳转到DApp <image src="../../static/img/me-21.png" @click="closePopup()">
					</image>
				</view>

				<view class="dap">
					<view class="dap-tit">
						<image src='../../static/img/demo-05.png'></image>
						KT节点
					</view>
					<view class="dap-info"></view>
				</view>

				<view class="netlw">
					<view class="netlw-tit">网络</view>
					<view class="newlt-type">
						<image src="../../static/img/demo-03.png"></image>
						BSC
					</view>
				</view>

				<view class="risk">
					<view class="risk-tit">风险提示</view>
					<view class="risk-info">
						<view>DApp页面完全由该项目方控制，该APP仅充当浏览器的作用， 故请在使用该DApp时务必小心谨慎，转账务必核对收款地址 或合约地址；</view>
						<view>不推荐任何DApp，仅做收录，不构成投资意见。我们会尽可 能收集更多客观信息，以帮助您判断是否继续使用该DApp.</view>
						<view>一但您使用DApp后导致资产丢失，我们不承担任何责任，也 不具备赔偿义务，会配合相关机构提取项目方数据配合调查。</view>
					</view>
				</view>

				<view class="footer">
					<view>确定</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { browserSetListApi } from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				list: ['首页', '生态', 'NFT', 'DeFi', '空投', '交易'],
				tabIndex: 0,
				borwseList: [],
				barshow: false,
			}
		},
		mixins: [navBarMixin],
		methods: {
			search(e) {
				console.log(e.detail.value);
				var url = e.detail.value
				uni.setStorageSync('searchUrl',url)
				if (url) {
					uni.navigateTo({
						url: '/pages/browse/outer?url=' + url
						// url: '/pages/me/search?url=' + encodeURIComponent('https://www.baidu.com')
						// url: '/pages/me/search?url=' + encodeURIComponent('https://htpage.qiaonongrenzf.cn')
					})
				}
			},
			openPopup(url) {
				uni.navigateTo({
					url: '/pages/browse/outer?url=' + url
				})
				// this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			brok() {
				uni.navigateTo({
					url: '/pages/me/brok'
				})
			},
			shop() {
				uni.navigateTo({
					url: '/pages/browse/shop'
				})
			},
			async getBrowser() {
				const res = await browserSetListApi()
				if(!res.code) {
					this.borwseList = res.data
				}
			}
		},
		onShow() {
			this.getBrowser()
		},
		onPageScroll(e) {
			// console.log(e);
			if (e.scrollTop > 48) {
				this.barshow = true
			} else {
				this.barshow = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		padding-bottom: 30rpx;

		.bar {
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999;
			animation: bg 0.8s 1 both linear;
			background-color: #B1DBFE;
		}

		.browse-head {
			height: 334rpx;
			position: relative;
			background: url('../../static/img/browse-01.png') no-repeat;
			background-size: cover;

			.browse-search {
				display: flex;
				align-items: center;
				position: absolute;
				top: 100%;
				width: 90%;
				height: 80rpx;
				background: #fff;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 0 30rpx;
				box-sizing: border-box;
				border-radius: 40rpx;

				.search-img {
					width: 32rpx;
					height: 32rpx;
				}

				input {
					margin-left: 26rpx;
					flex: 1;
				}

				.sao-img {
					width: 35rpx;
					height: 35rpx;
				}

			}
		}

		.browse-scroll {
			margin-top: 90rpx;

			.scroll-view-x {
				white-space: nowrap;

				::v-deep .uni-scroll-view-content {
					.scroll-view-item {
						font-size: 30rpx;
						color: #999999;
						padding: 0 30rpx;
						display: inline-block;

						&.act-item {
							color: $theme-color-a;
						}
					}

					.tab_sel {
						font-weight: 500;
						color: #3F93FF;
					}
				}
			}

		}

		.main-ctr {
			padding: 0 30rpx;

			.c-wrap {
				min-height: 368rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				background: #fff;
				border-radius: 10rpx;
				position: relative;

				.c-top-nav {
					display: flex;

					.nav-item {
						padding: 0 40rpx;

						color: #999;
						font-size: 28rpx;

						&:first-child {
							padding-left: 0;
						}

						view {
							position: relative;
							padding-bottom: 6px;
						}

						&.act-nav view {
							color: #000;
						}

						&.act-nav view::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 70%;
							height: 4rpx;
							background-color: #000;
						}
					}
				}

				.c-down {
					margin-top: 50rpx;

					.empty {
						width: max-content;

						image {
							width: 200rpx;
							height: 140rpx;
						}

						view {
							text-align: center;
							color: #999999;
							font-size: 24rpx;
						}
					}

				}

				.c_btn {
					width: 146rpx;
					height: 58rpx;
					line-height: 58rpx;
					color: white;
					font-weight: 500;
					font-size: 28rpx;
					text-align: center;
					background: #3F93FF;
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					position: absolute;
					right: 30rpx;
					top: 30rpx;
				}
			}

			.pt_0 {
				padding-top: 0 !important;
			}

			.new-box {
				padding: 30rpx;
				background: #fff;
				border-radius: 10rpx;
				// margin-top: 30rpx;

				.new-f-tit {
					display: flex;
					justify-content: space-between;

					view:first-child {
						color: #333;
						font-size: 32rpx;
					}

					view:last-child {
						display: flex;
						align-items: center;
						color: #999;
						font-size: 24rpx;

						image {
							margin-left: 20rpx;
							width: 10rpx;
							height: 20rpx;
						}
					}
				}

				.new-project {
					margin-top: 10rpx;

					.project-item {
						height: 133rpx;
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #eee;

						image {
							width: 64rpx;
							// height: 64rpx;
						}

						.project-info {
							margin-left: 20rpx;
							flex: 1;
							overflow: hidden;

							view:last-child {
								color: #999;
								font-size: 24rpx;

								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								white-space: nowrap;
							}
						}
					}
				}
			}

			.recomm-box {
				padding: 30rpx;
				margin-top: 30rpx;
				background: #fff;
				border-radius: 10rpx;

				.recomm-tit {
					font-size: 32rpx;
				}

				.recomm-list {
					margin-top: 10rpx;

					.recomm-item {
						height: 133rpx;
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #eee;

						image {
							width: 64rpx;
							height: 64rpx;
						}

						.recomm-info {
							flex: 1;
							margin-left: 20rpx;
							overflow: hidden;

							view:last-child {
								color: #999;
								font-size: 24rpx;

								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}

		.network-box {
			min-height: 1110rpx;
			padding-bottom: 60rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;

			.network-title {
				position: relative;
				height: 160rpx;
				line-height: 160rpx;
				text-align: center;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);

				image {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 30rpx;
					top: 60rpx;
				}
			}

			.dap {
				padding: 0 30rpx;

				.dap-tit {
					display: flex;
					align-items: center;
					color: #333;
					font-size: 28rpx;

					image {
						margin-right: 20rpx;
						width: 56rpx;
						height: 56rpx;
					}
				}

				.dap-info {
					min-height: 200rpx;
					margin-top: 20rpx;
				}
			}

			.netlw {
				padding: 0 30rpx;

				.netlw-tit {
					font-size: 28rpx;
				}

				.newlt-type {
					margin-top: 20rpx;
					height: 60rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #333;
					border: 2rpx solid $theme-color-a;
					border-radius: 30rpx;
					width: max-content;

					image {
						margin-right: 12rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.risk {
				padding: 0 30rpx;
				margin-top: 30rpx;

				.risk-info {
					margin-top: 20rpx;

					view {
						margin-top: 8rpx;
						font-size: 24rpx;
						color: #999;
					}
				}
			}

			.footer {
				padding: 0 65rpx;

				&>view {
					height: 80rpx;
					margin-top: 50rpx;
					line-height: 80rpx;
					text-align: center;
					background: $theme-color-a;
					border-radius: 40rpx;
					color: #fff;
					font-size: 28rpx;
				}
			}
		}
	}
</style>